<route>
    {
        meta: {
            layout: 'nepu',
            title:'纵向课题'
        }
    }
  </route>
<template>
    <view>
        <Uploader @confirm="openUploader"></Uploader>
        <InnerTable :data="tableData" @delete="handleDelete" @update="handleUpdate"></InnerTable>
        <a-divider></a-divider>
        <AntdZh>
            <a-pagination v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
                @change="getList" />
        </AntdZh>
        <!--上传 / 修改 Modal-->
        <AntdConfirmModal :title="isCreate ? '新建' : '修改'" ref="modalRef" width="800px" :keepSlot="false"
            @confirm="submitForm">
            <template #header v-if="isCreate">
                <a-row>
                    <a-col :span="2">
                        <a-tooltip title="暂存">
                            <a-button shape="circle" size="large" @click="tapStore">
                                <template #icon>
                                    <VerticalAlignBottomOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                    <a-col :span="2">
                        <a-tooltip title="历史草稿">
                            <a-button shape="circle" size="large" @click="showDrafts">
                                <template #icon>
                                    <HistoryOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                </a-row>
            </template>
            <a-form ref="formRef" :model="form" name="basic" :label-col="{ span: 8 }">
                <view v-if="isCreate">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="课题名称" name="topicName" :rules="[{ required: true, message: '请输入课题名称' }]">
                                <a-input v-model:value="form.topicName" placeholder="请输入课题名称" style="width: 230px" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="课题经费 （万）" name="topicFunds"
                                :rules="[{ required: true, message: '请输入课题经费' }]">
                                <a-input-number id="inputNumber" v-model:value="form.topicFunds" style="width: 250px"
                                    :min="0" placeholder="请输入课题经费" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="课题编码" name="topicCode" :rules="[{ required: true, message: '请输入课题编码' }]">
                                <a-input v-model:value="form.topicCode" placeholder="请输入课题编码" style="width: 230px" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="到账经费（万）" name="receivedFunds"
                                :rules="[{ required: true, message: '请输入已到账经费' }]">
                                <a-input-number id="inputNumber" v-model:value="form.receivedFunds" style="width: 250px"
                                    :min="0" placeholder="请输入已到账经费" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="课题等级" name="topicDictId" :rules="[{ required: true, message: '请选择课题等级' }]">
                                <a-cascader style="width: 230px" placeholder="请选择课题等级" v-model="form.topicDictId"
                                    :props="{ value: 'id', emitPath: false }" :options="dict" :show-all-levels="false" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="执行日期" name="buildDate" :rules="[{ required: true, message: '请选择执行日期' }]">
                                <AntdZh>
                                    <a-date-picker valueFormat="YYYY-MM-DD" :disabled-date="disabledDate" v-model:value="form.buildDate"
                                        placeholder="选择开始日期" style="width: 250px" />
                                </AntdZh>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="审核部门" name="deptName" :rules="[{ required: true, message: '请选择审核部门' }]">
                                <TopicDeptSelect v-model:value="form.deptName"></TopicDeptSelect>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="负责人" name="leaderId" :rules="[{ required: true, message: '请选择负责人' }]">
                                <LoginUserCell v-model:userId="form.leaderId" v-model:nickName="form.leader"
                                    style="width: 250px">
                                </LoginUserCell>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="是否延期" name="isDelay" :rules="[{ required: true, message: '请选择是否延期' }]">
                                <a-radio-group v-model:value="isDelay" name="isDelay">
                                    <a-radio :value="1" @change="form.isDelay = 1">是</a-radio>
                                    <a-radio :value="0" @change="form.isDelay = 0">否</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="延期月数" name="delayMonths" v-show="form.isDelay === 1"
                                :rules="[{ required: true, message: '请输入延期月数' }]">
                                <a-input-number id="inputNumber" v-model:value="form.delayMonths" style="width: 230px"
                                    :min="0" placeholder="请输入延期月数" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="21" pull="3">
                            <a-form-item label="立项与结束日期" name="dataValue"
                                :rules="[{ required: true, message: '请选择立项与结束日期' }]">
                                <AntdZh>
                                <a-range-picker valueFormat="YYYY-MM-DD" v-model:value="dataValue" :placeholder="['立项日期', '结束日期']"
                                    @change="validMonth" />
                                </AntdZh>
                                <a-tag style="margin-left: 20px" color="#108ee9">{{ `有效月数 ${valid}` }}</a-tag>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="21" pull="3">
                            <a-form-item label="参与成员" name="userIdList" :rules="[{ required: true, message: '请选择参与成员' }]">
                                <AntdUserMulSelect v-model:value="form.userIdList" style="width: 250px"></AntdUserMulSelect>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="上传附件">
                                <a-upload-dragger v-model:fileList="fileList" name="file" :headers="headerConfig"
                                    :action="url" @change="handleChange" @drop="handleDrop" :max-count="1">
                                    <p class="ant-upload-drag-icon">
                                        <inbox-outlined></inbox-outlined>
                                    </p>
                                    <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                                </a-upload-dragger>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </view>
            </a-form>
        </AntdConfirmModal>
        <!--草稿列表-->
        <DraftDrawer v-if="draftShow" v-model:show="draftShow" :form.sync="form"></DraftDrawer>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
// 图标引入
import { InboxOutlined, VerticalAlignBottomOutlined, HistoryOutlined } from '@ant-design/icons-vue';
// 组件 & 函数引入
import { InnerTable, TopicDeptSelect, LoginUserCell, Uploader, formDefault, createDraft, DraftDrawer, AntdUserMulSelect } from './index'
// CURD
import { createOne, queryList, deleteOne } from '@/custom/nepu/api/topic';
// HOOKS
import useApp from '@/hooks'
const { $, proxy } = useApp()
// import urlStore from '@/store/modules/httpUrl'

const headerConfig = ref();
// const url = ref(`${urlStore().httpUrl}/disk/upload`)
const dataValue = ref([]);
const valid = ref("0 个月");
const modalRef = ref(null)
const isCreate = ref(true)
const formRef = ref(null)
const draftShow = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10
})
const dict = ref([]);
// 表单
const form = ref(formDefault);
const total = ref(1)
const tableData = ref([])
const props = defineProps({
    show: {
        type: Boolean,
    },
    viewData: {
        type: Object,
    },
});

//确定负责人
function confirmLeader(e) {
    form.value.leader = e.nickName;
    form.value.leaderId = e.id;
}
//计算有效月数
function validMonth() {

}
//附件上传
const handleChange = info => {
    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败.`);
    }
};
function openUploader() {
    isCreate.value = true;
    modalRef.value.openModal()
}
// 查
function getList() {
    queryList(queryParams.value).then(res => {
        console.log(res)
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
// 修改
function handleUpdate(e) {
    form.value = e
    isCreate.value = false
    modalRef.value.openModal()
}
// 记录删除
function handleDelete(id) {
    console.log(id)
    deleteOne(id).then(r => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 点击暂存
function tapStore() {
    let formId = '纵向课题'
    createDraft({
        formId,
        formJsonStr: JSON.stringify(form.value)
    }).then(r => {
        $.showToast({
            title: '暂存成功',
            icon: 'success'
        })
    })
}
// 展示草稿列表
function showDrafts() {
    //modalRef.value.closeModal();
    draftShow.value = true;
}

function submitForm() {
    console.log(form.value)
    formRef.value.validateFields().then(v => {
        console.log('校验成功')
        createOne(form.value).then(res => {
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            getList()
            form.value = formDefault;
            modalRef.value.closeModal()
        })
    }).catch(e => {
        console.log('校验失败')
    })
}
// function getToken() {
//     headerConfig.value = {
//         token: window.localStorage.getItem("token"),
//     };
// }
// getToken();
getList()
</script>